<template>
  <el-dialog v-model="visible" width="80%" :before-close="handleClose">
    <span slot="title">文件预览</span>

    <!-- 用于显示文件内容的区域 -->
    <div v-if="fileType === 'word'">
      <!-- 使用iframe预览Word文件 -->
      <iframe
        :src="fileContent"
        width="100%"
        height="500px"
        style="border: none"
      ></iframe>
    </div>

    <div v-else-if="fileType === 'image'">
      <img
        :src="fileContent"
        alt="预览图片"
        @load="handleImageLoad"
        style="width: 100%; max-height: 500px; object-fit: contain"
      />
    </div>

    <div v-else-if="fileType === 'pdf'">
      <embed
        :src="fileContent"
        type="application/pdf"
        width="100%"
        height="500px"
      />
    </div>

    <div v-else-if="fileType === 'video'">
      <video controls :src="fileContent" width="100%" height="500px" />
    </div>

    <div v-else>
      <el-skeleton v-if="loading" :rows="3" animated>
        <template #default>
          <el-skeleton-item />
        </template>
      </el-skeleton>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, toRefs, watch, defineProps, defineEmits } from "vue";
import { ElDialog, ElButton } from "element-plus";
import { previewFile } from "@/utils/api/File.js";

const loading = ref(true); // 图片是否在加载中

const fileContent = ref(""); // 存储文件内容的变量
const fileType = ref(""); // 存储文件类型

const props = defineProps({
  fileId: {
    type: String,
    required: true,
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
let { visible, fileId } = toRefs(props);

const emit = defineEmits(["close"]);
// 打开弹窗并加载文件内容
const openPreviewModal = async (id) => {
  try {
    const previewContent = await previewFile(id); // 获取文件内容
    console.log(previewContent);
    const contentType = previewContent.headers["content-type"];
    console.log(contentType);

    // 根据文件类型设置对应的预览方式
    if (
      contentType.includes("msword") ||
      contentType.includes("wordprocessingml")
    ) {
      fileType.value = "word"; // 设置为Word文件类型
      const url = window.URL.createObjectURL(previewContent.data, {
        type: "charset=utf-8",
      });
      const googleDocsViewerUrl = `https://docs.google.com/gview?url=${url}&embedded=true`;
      fileContent.value = googleDocsViewerUrl; // 使用Google Docs Viewer进行展示
    } else if (contentType.includes("image")) {
      fileType.value = "image";
      const url = window.URL.createObjectURL(previewContent.data);
      console.log(url);
      fileContent.value = url;
    } else if (contentType.includes("pdf")) {
      fileType.value = "pdf";
      const url = window.URL.createObjectURL(previewContent.data);
      fileContent.value = url;
    } else if (contentType.includes("video")) {
      fileType.value = "video";
      const url = window.URL.createObjectURL(previewContent.data);
      fileContent.value = url;
      console.log(url);
    } else {
      fileType.value = "";
      fileContent.value = "不支持的文件格式";
    }
    handleImageLoad();
  } catch (error) {
    console.error("获取文件内容失败", error);
    fileType.value = "";
    fileContent.value = "";
    loading.value = false; // 处理失败时不显示骨架屏
  }
};

// 关闭弹窗
const handleClose = () => {
  fileContent.value = "";
  fileType.value = "";
  emit("close");
};

// 图片加载完成的处理
const handleImageLoad = () => {
  loading.value = false; // 图片加载完成后隐藏骨架屏
};

// 监听visible变化，打开弹窗
watch(
  () => visible.value,
  (newVal) => {
    if (newVal) {
      openPreviewModal(fileId.value);
    }
  }
);

onMounted(() => {
  console.log(visible.value);
});
</script>

<style scoped>
/* 样式可以根据需求调整 */
</style>
